<!--
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2021-04-30 15:24:32
 * @FilePath: \多多插件\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/myStyles.css">
  <style>
    .skuBox {
      background-color: aquamarine;
      display: table;
    }

    .table {
      display: table;
      border: 1px solid #cccccc;
      margin: 5px;
      /*display: table时padding会失效*/
    }

    .row {
      display: table-row;
      border: 1px solid #cccccc;
      /*display: table-row时margin、padding同时失效*/
    }

    .cell {
      display: table-cell;
      border: 1px solid #cccccc;
      padding: 5px;
      /*display: table-cell时margin会失效*/
    }
  </style>
</head>

<body>
  <div class="v-tabs__item"></div>
  <div class="showBox">
    <table>
      <tr>
        <td>111</td>
        <td>222</td>
        <td>3ssssss33</td>
      </tr>
      <tr>
        <td>aaa</td>
        <td>sssssssss</td>
        <td>ddd</td>
      </tr>
    </table>
    <div class="table">
      <div class="row">
        <div class="cell">张三</div>
        <div class="cell">李四</div>
        <div class="cell">王五</div>
      </div>
      <div class="row">
        <div class="cell">张三</div>
        <div class="cell">李四</div>
        <div class="cell">王五</div>
      </div>
    </div>
    <div class="butBox">
      <button class="leftBtn">左</button>
      <button class="rightBtn">右</button>
    </div>
    <div class="skuBox">
      <span></span>
    </div>
    <span>
      其他尺寸请看描述下单哟
    </span>
  </div>
  <div style="display:none;">
    <div class="sku-spec-value-list">
      <div class="sku-spec-value">2507青灰色</div>
      <div class="sku-spec-value">2751原木色</div>
      <div class="sku-spec-value">2751深空灰</div>
      <div class="sku-spec-value">3050蓝色</div>
      <div class="sku-spec-value">3050绿色</div>
      <div class="sku-spec-value">3050银灰色</div>
      <div class="sku-spec-value">3050棕色</div>
      <div class="sku-spec-value">3050北欧蓝</div>
      <div class="sku-spec-value">3050藏蓝色</div>
      <div class="sku-spec-value">3050典雅蓝</div>
      <div class="sku-spec-value">3050粉色</div>
      <div class="sku-spec-value">3050黑金色</div>
      <div class="sku-spec-value">3031蓝金</div>
      <div class="sku-spec-value">3031棕灰</div>
      <div class="sku-spec-value">3031白金</div>
      <div class="sku-spec-value">2507橡木色</div>
      <div class="sku-spec-value">3515咖啡色</div>
      <div class="sku-spec-value">3515北欧蓝</div>
    </div>
    <div class="sku-spec-value-list">
      <div class="sku-spec-value">111</div>
      <div class="sku-spec-value">111</div>
      <div class="sku-spec-value">111</div>
      <div class="sku-spec-value">111</div>
      <div class="sku-spec-value">111</div>
      <div class="sku-spec-value">111</div>
    </div>
  </div>
  <script src="./js/jquery-1.11.1.min.js"></script>
  <script>
    var leftBtn = document.querySelector('.leftBtn');
    var rightBtn = document.querySelector('.rightBtn');
    var showBox = document.querySelector('.showBox');
    var skuBox = document.querySelector('.skuBox');

    rightBtn.addEventListener('click', () => { })

    var length = $('.sku-spec-value-list').length;
    var index = 0;

    getSku(index);

    console.log($('.v-tabs__item'));


    var mainSku = $('.sku-spec-value-list:eq(0)').children();
    var assistSku = $('.sku-spec-value-list:eq(1)').children();
    var testSku = $('.sku-spec-value-list:eq(2)').children();

    console.log(mainSku, assistSku, testSku);
    function getSku(index) {
      Array.from($('.sku-spec-value-list:eq(' + index + ')').children()).forEach(element => {
        var br = document.createElement('br');
        var textNode = document.createTextNode(element.textContent);
        skuBox.appendChild(textNode);
        skuBox.appendChild(br);
      });
    }
  </script>
</body>

</html>